import React, { useRef, useEffect } from 'react';
import http from '@/services/request';
import * as echarts from 'echarts';
import BreedingScale from '../breeding-scale';
import './index.css';

export default function Index() {
  const RefTemperature = useRef<HTMLDivElement | HTMLElement | object | any>(
    null
  );
  const RefHumidity = useRef<HTMLDivElement | HTMLElement | object | any>(null);
  const RefLight = useRef<HTMLDivElement | HTMLElement | object | any>(null);
  const RefAir = useRef<HTMLDivElement | HTMLElement | object | any>(null);
  const renderPie = async () => {
    const seriesTemperatureData: number[] = [];
    const seriesHumidityData: number[] = [];
    const dateArr: string[] = [];
    await http.get('/hardware/temperatureAndHumidity/temperatureAndHumidityAvgQuery').then((res) => {
      const { data } = res;
      data.forEach(item => {
        seriesTemperatureData.push(item['avg-temperature']);
        seriesHumidityData.push(item['avg-humidity']);
        dateArr.push(item['date']);
      })
    });
    // 温度的
    setTimeout(async () => {
      echarts.init(RefTemperature.current);
      type EChartsOption = echarts.EChartsOption;
      var chartDomT = document.getElementById('pieT')!;
      var myChartT = echarts.init(chartDomT);
      var optionT: EChartsOption;

      optionT = {
        title: {
          text: '各鸡舍当前的温度情况：'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataView: {
              readOnly: false,
              title: '查看数据',
              lang: ['数据视图', '关闭', '刷新']
            },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dateArr
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        series: [
          {
            name: '当前鸡舍的温度情况如下：',
            type: 'line',
            data: seriesTemperatureData,
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          }
        ]
      };

      optionT && myChartT.setOption(optionT);
    }, 0);

    // 湿度
    setTimeout(() => {
      echarts.init(RefHumidity.current);
      type EChartsOption = echarts.EChartsOption;
      var chartDomH = document.getElementById('pieH')!;
      var myChartH = echarts.init(chartDomH);
      var optionH: EChartsOption;
      optionH = {
        title: {
          text: '各鸡舍当前的湿度情况：'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataView: {
              readOnly: false,
              title: '查看数据',
              lang: ['数据视图', '关闭', '刷新']
            },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dateArr
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} RH'
          }
        },
        series: [
          {
            name: '当前鸡舍的湿度情况如下：',
            type: 'line',
            data: seriesHumidityData,
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          }
        ]
      };

      optionH && myChartH.setOption(optionH);
    }, 0);

    // 光照的
    setTimeout(() => {
      echarts.init(RefLight.current);
      type EChartsOption = echarts.EChartsOption;
      var chartDomL = document.getElementById('pieL')!;
      var myChartL = echarts.init(chartDomL);
      var optionL: EChartsOption;
      optionL = {
        title: {
          text: '当前各鸡舍的光照强度如下：'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['鸡舍A', '鸡舍B', '鸡舍C']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} lux'
          }
        },
        series: [
          {
            name: '各鸡舍的光照情况如下：',
            type: 'line',
            data: [5, 7, 6],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          }
        ]
      };

      optionL && myChartL.setOption(optionL);
    }, 0);

    //空气质量
    setTimeout(() => {
      echarts.init(RefAir.current);
      type EChartsOption = echarts.EChartsOption;
      var chartDomA = document.getElementById('pieA')!;
      var myChartA = echarts.init(chartDomA);
      var optionA: EChartsOption;
      optionA = {
        title: {
          text: '当前各鸡舍的空气质量指数AQI',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: ['鸡舍A', '鸡舍B', '鸡舍C']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: 'AQI:{value}'
          }
        },
        series: [
          {
            data: [50, 49, 51],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ],
        toolbox: {
          show: true,
          feature: {
            dataView: {
              readOnly: false,
              title: '查看数据',
              lang: ['数据视图', '关闭', '刷新']
            },
            magicType: {
              type: ['line', 'bar']
            },
            restore: {
              title: '恢复'
            },
            saveAsImage: {
              title: '保存为图片'
            }
          }
        }
      };
      optionA && myChartA.setOption(optionA);
    }, 0);
  };

  useEffect(() => {
    renderPie();
  }, []);

  return (
    <div className="data-wrapper">
      <BreedingScale />
      <div
        ref={RefTemperature}
        id="pieT"
        style={{
          margin: '0 auto',
          height: '400px',
          marginTop: '30px',
          width: '50%'
        }}
      />
      <div
        ref={RefHumidity}
        id="pieH"
        style={{
          margin: '0 auto',
          height: '400px',
          marginTop: '30px',
          width: '50%'
        }}
      />
    </div>
  );
}
